{% extends "main.html" %}
  {% block title %}Movie{% endblock %}
 {% block name %}Movie{% endblock %}
{% block table %}

     <table id="t1" class="table table-striped table-bordered" cellspacing="0" width="100%">
        <thead>
            <tr>
                <th>PostTime</th>
                <th>Code</th>
                <th>Name</th>
                <th>Publisher</th>
                <th>Director</th>
                <th>Manufacture</th>
                <th>Length</th>
                <th>Type</th>
                <th>Actress</th>
            </tr>
        </thead>
      </table>
{% endblock %}

{% block script %}
    <script type="text/javascript">
      function  tab(key,name) {
          if(key.length === 0){
              var url = "/mov_data/all/"+name;
          }else{
              url = "/mov_data/"+key+"/"+name
       }
           $('#t1').dataTable( {
               "dom": '<"toolbar">rtip',
        "paging":   true,
         "pageLength": 20,
          "destroy": true,
        "ordering": true,
        "info":     true,
        "bServerSide": true,
        "bProcessing": true,
		"sAjaxSource": url,
         "columns": [
            { "data": "PostTime"},
            { "data": "Code" },
            { "data": "Name" },
            { "data": "Publisher" },
            { "data": "Director" },
            { "data": "Manufacturer" },
            { "data": "Length" },
            { "data": "Type" ,
                "render": function(data) {
                    var result = "";
                    for(var i=0;i<data.length;i++){
                        result  = result + '<a href="/type/'+data[i]+'">'+data[i]+'   '
                    }
                    return result
                }
            },
             { "data": "Actress" ,
             "render": function(data, type, row) {
                    var result = "";
                    for(var i=0;i<data.length;i++){
                        result  = result + '<a href="/actress/'+data[i]+'">'+data[i]+'   '
                    }
                    return result
                }
             }
        ],
        columnDefs: [
               { width: '10%', targets: 0 },
                { width: '10%', targets: 1},
                { width: '20%', targets: 2},
                { width: '7%', targets: 3},
                { width: '10%', targets: 4},
                { width: '10%', targets:5},
                { width: '8%', targets:6},
                { width: '17%', targets:7},
                { width: '10%', targets:8}

        ]
	});
          var data = '{{ data }}';
          var image = '{{ image }}';

          if(name == "all"){
              $("div.toolbar").html(  '<b>Total movie: '+ data+'</b>' + '<hr>');
          }else if(image.length > 0){
              $("div.toolbar").html('<b> '+ name + ' Movie: '+ data+'</b>' +
                      '<img class=pull-right src=/static/image/' +image+'/>' + '<hr>');
          }
          else{
                $("div.toolbar").html( '<b>'+ name + ' Movie: '+ data+'</b>' + '<hr>');
          }

      }
       $(document).ready(function() {
           var name =  "{{name}}";
           var key = "{{ key }}";
           if(name.length === 0 ){
               name = 'all';
           }
	      tab(key,name);
       });

   </script>
{% endblock %}